<template>
	<div class="self_free_spread">
		<h1>{{ data.name }}</h1>
		<div class="content">
			<h3>推广内容如下：</h3>
			<div class="lists">
				<div class="list" v-for="item in data.content" @click="goDetail(item.id)">
					<img :src="item.face_path" alt="">
					<div class="text">
						<h5>{{ item.title }}</h5>
						<p>{{ item.sub_title }}</p>
					</div>
					<p></p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'self_free_spread',
		props: ['data'],
		data() {
			return {

			}
		},
		components: {

		},
		computed: {

		},
		created() {

		},
		methods: {
			//详情
			goDetail(id){
				let l=(window.screen.availWidth-10-750)/2;
				let t=(window.screen.availHeight-30-565)/2;
				window.open('http://tmp.mofing.com/utils/docs/content/'+ id +'.html','_blank','width=750,height=565,top='+t+',left='+l+',toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no');
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.self_free_spread {
		text-align: left;
		>h1{
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;
			border-top: 1px solid #cdcdcd;
			border-bottom: 1px solid #cdcdcd;
		}
		.content {
			>h3{
				font-size: 18px;
				color: #666;
				font-weight: 400;
				padding: 34px 0 12px 34px;
			}
			.lists{
				display: flex;
				flex-wrap: wrap;
				.list{
					width: 45%;
					height: 94px;
					border: 1px solid #e7e7eb;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 24px 0 0 36px;
					cursor: pointer;
					img{
						width: 94px;
						height: 94px;
					}
					.text{
						width: 280px;
						height: 64px;
						h5{
							font-size: 14px;
							color: #000;
							font-weight: 400;
						}
						p{
							font-size: 13px;
							color: #8d8d8d;
							margin-top: 10px;
						}
					}
					>p{
						width: 10px;
						height: 10px;
						border-top: 1px solid #bebebe;
						border-right: 1px solid #bebebe;
						transform: rotate(45deg);
						margin-right: 16px;
					}
				}
			}
		}
	}
</style>